<template>
  <div class="test-page">
    <h1>高德地图组件测试</h1>
    
    <!-- 基础测试 -->
    <div class="test-section">
      <h2>基础地图测试</h2>
      <p>状态: {{ mapStatus }}</p>
      <p v-if="errorMessage" class="error">错误: {{ errorMessage }}</p>
      
      <AMapComponent 
        :api-key="apiKey"
        :width="'100%'"
        :height="'400px'"
        :center="[116.397428, 39.90923]"
        :zoom="10"
        :show-controls="false"
        @map-ready="onMapReady"
        @district-click="onDistrictClick"
      />
    </div>
    
    <!-- 调试信息 -->
    <div class="debug-section">
      <h3>调试信息</h3>
      <div class="debug-info">
        <p><strong>API Key:</strong> {{ apiKey ? '已设置' : '未设置' }}</p>
        <p><strong>AMap 对象:</strong> {{ typeof window.AMap !== 'undefined' ? '已加载' : '未加载' }}</p>
        <p><strong>地图容器:</strong> {{ mapContainer ? '已创建' : '未创建' }}</p>
        <p><strong>控制台错误:</strong> 请查看浏览器控制台</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import AMapComponent from './AMapComponent.vue'

// API密钥 - 请替换为有效的高德地图API密钥
const apiKey = 'e6072f86d2d66d78671eaa4542006354'

// 状态
const mapStatus = ref('初始化中...')
const errorMessage = ref('')
const mapContainer = ref(false)

// 事件处理
const onMapReady = (map: any) => {
  mapStatus.value = '地图加载成功'
  mapContainer.value = true
  console.log('地图实例:', map)
}

const onDistrictClick = (district: any) => {
  console.log('区域点击:', district)
}

// 检查环境
onMounted(() => {
  // 检查网络连接
  if (!navigator.onLine) {
    errorMessage.value = '网络连接异常'
    mapStatus.value = '网络错误'
    return
  }
  
  // 检查HTTPS
  if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
    console.warn('高德地图API建议在HTTPS环境下使用')
  }
  
  // 监听错误
  window.addEventListener('error', (e) => {
    if (e.message.includes('amap') || e.message.includes('AMap')) {
      errorMessage.value = `地图加载错误: ${e.message}`
      mapStatus.value = '加载失败'
    }
  })
  
  // 检查API密钥格式
  if (!apiKey || apiKey.length !== 32) {
    errorMessage.value = 'API密钥格式不正确（应为32位字符）'
    mapStatus.value = 'API密钥错误'
  }
})
</script>

<style scoped>
.test-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

.debug-section {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
}

.debug-info p {
  margin: 8px 0;
  font-family: monospace;
}

.error {
  color: #e74c3c;
  font-weight: bold;
}

h1, h2, h3 {
  color: #2c3e50;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}
</style>